---
title: "Flex"
# description: "Utilities for controlling how flex items both grow and shrink."
description: "用于控制 flex 项目放大和缩小的功能类。"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/flex'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Initial

<!-- Use `flex-initial` to allow a flex item to shrink but not grow, taking into account its initial size: -->
使用 `flex-initial` 允许 flex 项目在考虑到其初始尺寸的情况下缩小但不放大：

```html indigo
<template preview>
  <p class="text-sm text-indigo-600">Items don't grow when there's extra space</p>
  <div class="mt-2 flex space-x-4">
    <div class="flex-initial rounded-md bg-indigo-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Short
    </div>
    <div class="flex-initial rounded-md bg-indigo-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Medium length
    </div>
  </div>

  <p class="mt-8 text-sm text-indigo-600">Items shrink if possible when needed</p>
  <div class="mt-2 flex space-x-4">
    <div class="flex-initial rounded-md bg-indigo-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Short
    </div>
    <div class="flex-initial rounded-md bg-indigo-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Medium length
    </div>
    <div class="flex-initial rounded-md bg-indigo-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad labore ipsam, aut rem quo repellat esse tempore id, quidem
    </div>
  </div>
</template>

<div class="flex">
  <div class="**flex-initial** ...">
    <!-- Won't grow, but will shrink if needed -->
  </div>
  <div class="**flex-initial** ...">
    <!-- Won't grow, but will shrink if needed -->
  </div>
  <div class="**flex-initial** ...">
    <!-- Won't grow, but will shrink if needed -->
  </div>
</div>
```

## Flex 1

<!-- Use `flex-1` to allow a flex item to grow and shrink as needed, ignoring its initial size: -->
使用 `flex-1` 允许 flex 项目根据需要放大和缩小，忽略其初始尺寸。

```html fuchsia
<template preview>
  <p class="text-sm text-fuchsia-600">Default behavior</p>
  <div class="mt-2 flex space-x-4">
    <div class="rounded-md bg-fuchsia-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Short
    </div>
    <div class="rounded-md bg-fuchsia-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Medium length
    </div>
    <div class="rounded-md bg-fuchsia-500 text-white font-semibold flex items-center justify-center py-3 px-6">
        Significantly larger amount of content
    </div>
  </div>

  <p class="mt-8 text-sm text-fuchsia-600">With <code>.flex-1</code></p>
  <div class="mt-2 flex space-x-4">
    <div class="flex-1 rounded-md bg-fuchsia-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Short
    </div>
    <div class="flex-1 rounded-md bg-fuchsia-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Medium length
    </div>
    <div class="flex-1 rounded-md bg-fuchsia-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Significantly larger amount of content
    </div>
  </div>
</template>

<div class="flex">
  <div class="**flex-1** ...">
    <!-- Will grow and shrink as needed without taking initial size into account -->
  </div>
  <div class="**flex-1** ...">
    <!-- Will grow and shrink as needed without taking initial size into account -->
  </div>
  <div class="**flex-1** ...">
    <!-- Will grow and shrink as needed without taking initial size into account -->
  </div>
</div>
```

## Auto

<!-- Use `flex-auto` to allow a flex item to grow and shrink, taking into account its initial size: -->
使用 `flex-auto` 允许一个 flex 项目在考虑到其初始大小的情况下放大和缩小：

```html lightBlue
<template preview>
  <p class="text-sm text-light-blue-600">Default behavior</p>
  <div class="mt-2 flex space-x-4">
    <div class="rounded-md bg-light-blue-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Short
    </div>
    <div class="rounded-md bg-light-blue-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Medium length
    </div>
    <div class="rounded-md bg-light-blue-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Significantly larger amount of content
    </div>
  </div>

  <p class="mt-8 text-sm text-light-blue-600">With <code>.flex-auto</code></p>
  <div class="mt-2 flex space-x-4">
    <div class="flex-auto rounded-md bg-light-blue-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Short
    </div>
    <div class="flex-auto rounded-md bg-light-blue-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Medium length
    </div>
    <div class="flex-auto rounded-md bg-light-blue-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Significantly larger amount of content
    </div>
  </div>
</template>

<div class="flex ...">
  <div class="**flex-auto** ...">
    <!-- Will grow and shrink as needed taking initial size into account -->
  </div>
  <div class="**flex-auto** ...">
    <!-- Will grow and shrink as needed taking initial size into account -->
  </div>
  <div class="**flex-auto** ...">
    <!-- Will grow and shrink as needed taking initial size into account -->
  </div>
</div>
```

## None

<!-- Use `flex-none` to prevent a flex item from growing or shrinking: -->
使用 `flex-none` 来阻止一个 flex 项目的放大和缩小：

```html emerald
<template preview>
  <div class="flex space-x-4">
    <div class="flex-1 rounded-md bg-emerald-300 text-white font-semibold flex items-center justify-center py-3 px-6">
      Item that can grow or shrink if needed
    </div>
    <div class="flex-none rounded-md bg-emerald-500 text-white font-semibold flex items-center justify-center py-3 px-6">
      Item that cannot grow or shrink
    </div>
    <div class="flex-1 rounded-md bg-emerald-300 text-white font-semibold flex items-center justify-center py-3 px-6">
      Item that can grow or shrink if needed
    </div>
  </div>
</template>

<div class="flex ...">
  <div class="flex-1 ...">
    <!-- Will grow and shrink as needed -->
  </div>
  <div class="**flex-none** ...">
    <!-- Will grow and shrink as needed taking initial size into account -->
  </div>
  <div class="flex-1 ...">
    <!-- Will grow and shrink as needed -->
  </div>
</div>
```

<!-- ## Responsive -->
## 响应式

<!-- To control how a flex item both grows and shrinks at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:flex-1` to apply the `flex-1` utility at only medium screen sizes and above. -->
要控制 flex 项目在特定断点处的放大和缩小方式，可在任何现有的功能类产添加 `{screen}:` 前缀。例如，使用 `md:flex-1` 仅在中等尺寸及以上的屏幕应用 `flex-1` 功能。

```html
<div class="flex ...">
  <!-- ... -->
  <div class="flex-none **md:flex-1** ...">
    Responsive flex item
  </div>
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### Flex Values

<!-- By default Tailwind provides four `flex` utilities. You change, add, or remove these by editing the `theme.flex` section of your Tailwind config. -->
默认情况下，Tailwind 提供了四个 `flex` 功能类。您可以通过编辑您的 Tailwind 配置的 `theme.flex` 部分来改变、添加或删除这些功能类。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      flex: {
        '1': '1 1 0%',
        auto: '1 1 auto',
-       initial: '0 1 auto',
+       inherit: 'inherit',
        none: 'none',
+       '2': '2 2 0%',
      }
    }
  }
```

### 变体

<Variants plugin="flex" />

### 禁用

<Disabling plugin="flex" />
